<template>
    <form
    @submit.prevent="
      () => {
        return false
      }
    "
    class="img-detail single"
  >
    <imgInfo :imgid="imgid" :imgurl="imgurl" ref="refImgInfo" @close="onClose"/>
</form>
</template>

<script>
import ImgInfo from '@/components/info/img'
export default {
    data(){
        return {
            imgid:'',
            imgurl:''
        }
    },
    components:{ImgInfo},
    methods:{
        onClose(_id){
            if(_id)
            {
                $('.pro-header').parent().show();
                this.$router.replace({
                    path:'/game/'+_id
                })
            }else{
                location.href='/'
            }
        },
        loadMore(e) {
            this.$refs['refImgInfo'].loadMore(e);
            return;
            const { scrollTop, scrollHeight, clientHeight } = e.target
            if (scrollTop + clientHeight >= scrollHeight - 100) {
                if (this.scrollLoaded && this.hasMore) {
                this.scrollLoaded = false
                this.imgParams.page++
                this.queryResembleImgList()
                }
            }
        }
    },
    destroyed(){
        $(document).unbind('scroll')
    },
    mounted(){
        $('.pro-header').parent().hide();
        this.imgid=this.$route.params.id;
        this.imgurl=this.$route.query.imgurl;

        let that=this;
        $(document).on('scroll', function (e) {
            e.target=e.currentTarget.scrollingElement;
            that.$refs['refImgInfo'].loadMore(e);
        })
    }
}
</script>

<style scoped lang="less">
.img-detail{
    padding:20px;
}

</style>